<template>
  <div class="mask-wrap" v-show="maskShow">
    <img :src="LoadImg" alt="loading" />
    <p>正在打印 {{this.num+1}} / {{ this.len }}</p>
  </div>
</template>

<script>
import LoadImg from '@/assets/loading.jpeg'
export default {
  data() {
    return {
      LoadImg,
      num: null,
      len: null,
      maskShow: false
    }
  },
  methods: {
    hide() {
      this.maskShow = false
    },
    // num 当前打印次数，len总长度
    show(num, len) {
      if (num !== len - 1) {
        this.maskShow = true
      } else {
        this.maskShow = false
      }
      this.num = num
      this.len = len
    }
  }
}
</script>

<style scoped>
.mask-wrap {
  text-align: center;
  position: fixed;
  height: 100%;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(24, 27, 31);
  z-index: 9999;
}
.mask-wrap p {
  color: #ffffff;
  font-size: 20px;
}
</style>